<template>
  <div class='w-100 bg-dark'>
    <div id='g6'></div>
  </div>
</template>

<script>
  import G6 from '@antv/g6';
  import axios from 'axios';
  export default {
    name: 'page01',
    data() {
      return {
        g6_data: {
          nodes: [],
          edges: []
        },
      };
    },
    methods: {},
    mounted() {
      const container = document.getElementById('g6');
      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 20;
      const graph = new G6.Graph({
        container: 'g6',
        width,
        height,
        fitViewPadding: [20, 40, 50, 20],
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'lasso-select'],
        },
        layout: {
          type: 'force',
          linkDistance: 100,
          preventOverlap: true,
          nodeStrength: -10,
          edgeStrength: 0.1,
        },
        // 节点默认配置
        defaultNode: {
          size: 50,
          style: {
            fill: 'steelblue',
            stroke: 'gray'
          },
          labelCfg: {
            style: {
              fill: '#fff',
              stroke: 'green'
            },
          },
        },
        // 边默认配置
        defaultEdge: {
          style: {
            opacity: 0.7,
            fill: 'red',
          },
          labelCfg: {
            autoRotate: true,
          },
        },
        // 节点在各状态下的样式
        nodeStateStyles: {
          // hover 状态为 true 时的样式
          hover: {
            fill: 'lightsteelblue',
          },
          // click 状态为 true 时的样式
          click: {
            stroke: '#000',
            lineWidth: 3,
          },
        },
        // 边在各状态下的样式
        edgeStateStyles: {
          // click 状态为 true 时的样式
          click: {
            stroke: 'steelblue',
          },
        },
      });

      const main = async () => {
        const response = await axios({
          // url: 'http://10.222.2.203:7001/test02',
          url: 'http://10.222.2.203:7001/topo01',
        }).then((res) => {
          return res.data
          // this.g6_data.nodes = res.data.nodes
          // this.g6_data.edges = res.data.edges
          // console.log(this.g6_data.nodes)
        }).catch((err) => {
          console.log('error')
        });

        const remoteData = response

        const nodes = remoteData.nodes;
        const edges = remoteData.edges;


        // nodes.forEach((node) => {
        //   if (!node.style) {
        //     node.style = {};
        //   }
        //   node.style.lineWidth = 1;
        //   node.style.stroke = '#666';
        //   node.style.fill = 'steelblue';
        //   switch (node.class) {
        //     case 'c0': {
        //       node.type = 'circle';
        //       node.size = 30;
        //       break;
        //     }
        //     case 'c1': {
        //       node.type = 'rect';
        //       node.size = [35, 20];
        //       break;
        //     }
        //     case 'c2': {
        //       node.type = 'ellipse';
        //       node.size = [35, 20];
        //       break;
        //     }
        //   }
        // });
        // edges.forEach((edge) => {
        //   if (!edge.style) {
        //     edge.style = {};
        //   }
        //   edge.style.lineWidth = edge.weight;
        //   edge.style.opacity = 0.6;
        //   edge.style.stroke = 'grey';
        // });
        graph.data(remoteData);
        graph.render();

        // 监听鼠标进入节点
        graph.on('node:mouseenter', (e) => {
          const nodeItem = e.item;
          // 设置目标节点的 hover 状态 为 true
          graph.setItemState(nodeItem, 'hover', true);
        });
        // 监听鼠标离开节点
        graph.on('node:mouseleave', (e) => {
          const nodeItem = e.item;
          // 设置目标节点的 hover 状态 false
          graph.setItemState(nodeItem, 'hover', false);
        });
        // 监听鼠标点击节点
        graph.on('node:click', (e) => {
          // 先将所有当前有 click 状态的节点的 click 状态置为 false
          const clickNodes = graph.findAllByState('node', 'click');
          clickNodes.forEach((cn) => {
            graph.setItemState(cn, 'click', false);
          });
          const nodeItem = e.item;
          // 设置目标节点的 click 状态 为 true
          graph.setItemState(nodeItem, 'click', true);
        });
        // 监听鼠标点击节点
        graph.on('edge:click', (e) => {
          // 先将所有当前有 click 状态的边的 click 状态置为 false
          const clickEdges = graph.findAllByState('edge', 'click');
          clickEdges.forEach((ce) => {
            graph.setItemState(ce, 'click', false);
          });
          const edgeItem = e.item;
          // 设置目标边的 click 状态 为 true
          graph.setItemState(edgeItem, 'click', true);
        });
      };
      main();
    }
  }
</script>

<style>
  #g6 {
    /* width: 100%; */
    height: 800px;
    /* background-color: aquamarine; */
  }
</style>
